<template>
    <div>
      <!--面包屑导航区-->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>用户管理</el-breadcrumb-item>
        <el-breadcrumb-item>商品分类</el-breadcrumb-item>
      </el-breadcrumb>

      <!--卡片视图区-->
      <el-card>
        <el-row :gutter="20">
          <el-col :span="8">
         <el-button type="primary" @click="showAddCateDialog"> 添加分类</el-button>
          </el-col>
        </el-row>

        <!--表格-->
     <tree-table :data="catelist" :columns="columns" :selection-type="false" class="treetable"
                 :expand-type="false" show-index index-text="#" border :show-row-hover="false">
       <!--重点！！！！！作用域插槽定义在tree-table中-->
       <template slot="isOk" slot-scope="scope">
         <i class="el-icon-success" v-if="scope.row.cat_deleted == false" style="color: lightgreen"> </i>
         <i class="el-icon-error" v-else style="color: red;"> </i>
       </template>
        <!--等级排序-->
        <template slot="Order" slot-scope="scope">
          <el-tag v-if="scope.row.cat_level === 0" >一级</el-tag>
          <el-tag v-else-if="scope.row.cat_level === 1" type="success">二级</el-tag>
          <el-tag v-else  type="warning">三级</el-tag>
        </template>

       <!--操作-->
       <template slot="Opt" slot-scope="scope">
         <el-button  icon="el-icon-edit" type="primary" size="mini">编辑</el-button>
         <el-button  icon="el-icon-delete" type="danger" size="mini">删除</el-button>
       </template>
        </tree-table>

        <!--分页区域-->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="querInfo.pagenum"
          :page-sizes="[3, 10, 15, 20]"
          :page-size="querInfo.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </el-card>
      <!--添加分类对话框-->
      <el-dialog
        title="添加分类"
        :visible.sync="addCateDialogVisible"
        width="50%" @close="addCateDialogClosed">
        <el-form :model="addCateForm" :rules="addCateFormRules" ref="addCateFormRef" label-width="100px" >
          <el-form-item label="活动名称:" prop="cat_name">
            <el-input v-model="addCateForm.cat_name"></el-input>
          </el-form-item>
          <el-form-item label="父级分类:" >
            <!--options是数据源-->
            <!--props用于指定对象-->
            <!--change-on-select 在cascader级联api中没有-->
            <el-cascader expand-trigger="hover"
              v-model="selectedmultiKeys"
              :options="parentCateList"
              :props="cascaderProps"
              @change="parentCateChanged" clearable change-on-select></el-cascader>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
    <el-button @click="addCateDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addCate">确 定</el-button>
  </span>
      </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "Cate",
      data(){
          return {
            querInfo:{
              type:3,
              pagenum:1,
              pagesize:5
            },
            //商品分类的数据列表
          catelist:[ ],
            //数据总数量
            total:0,
            //为table指定列的定义
            columns:[
              {
                label: '分类名称',
                prop: 'cat_name',
                width: '400px'
              },
              {
                label:'是否有效',
                //将当前列定义为模板列
                type:'template',
                template:'isOk'
              },
              {
                label:'排序',
                //将当前列定义为模板列
                type:'template',
                template:'Order'
              },
              {
                label:'操作',
                //将当前列定义为模板列
                type:'template',
                template:'Opt'
              }
            ],
            //添加分类对话框
            addCateDialogVisible:false,
            //添加分类的表单数据对象
            addCateForm:{
              cat_name:'',
              cat_pid:0,
              //分类等级默认为一级分类
              cat_level:0

            },
            //添加分类的验证规则
            addCateFormRules:{
              cat_name:[
                {required:true,message:"请输入分类名称",trigger:'blur'}
              ]
            },
            //获取父级分类的数组
            parentCateList:[ ],
            //指定级联选择器的配置对象
            cascaderProps:{
              value:'cat_id',
              label:'cat_name',
              children:'children'
            },
            //选中父级分类的id数组的集合
            selectedmultiKeys:[ ]
          }
      },
      created(){
      this.getCateList()
      },
      methods:{
          //获取商品分类数据
       async getCateList(){
         const {data:res} = await this.axios.get('categories',{params:this.querInfo})
         if (res.meta.status !== 200){
           return this.$memege.error("获取商品列表失败！")
         }
         //return this.$memege.success("获取商品列表成功！")
         console.log(res.data)
         //把数据列表，赋值给 catelist
         this.catelist = res.data.result
         this.total = res.data.total
        },
        //监听 pagesize 改变
        handleSizeChange(newSize){
          this.querInfo.pagesize = newSize
          this.getCateList()
        },
        //监听 pagenum 的改变
        handleCurrentChange(newPage){
          this.querInfo.pagenum = newPage
          this.getCateList()
        },
        //添加分类的功能
        showAddCateDialog(){
         this.addCateDialogVisible = true,
           //点击获取父级分类列表
           this.getParentCateList()
        },
        //获取父级分类的数据列表
       async getParentCateList(){
        const {data:res}= await this.axios.get('categories',{params:{type:2}})
         if(res.meta.status !== 200){
           return this.$memege.error('获取父级分类列表失败')
         }
           this.parentCateList = res.data
        },
        //选择项触发的函数
        parentCateChanged(){
          console.log(this.selectedmultiKeys);
          //如果selectedmultiKeys数组大于0就表明选中父级分类
          if (this.selectedmultiKeys.length > 0){
            //选数组中的最后一项索引作为父级id
           this.addCateForm.cat_pid =  this.selectedmultiKeys[this.selectedmultiKeys.length-1]
            //当前的分类等级应该是length
            this.addCateForm.cat_level = this.selectedmultiKeys.length
            return
          }
          else {
            this.addCateForm.cat_pid = 0
            this.addCateForm.cat_level = 0
          }
        },
        //点击确认按钮触发
       async addCate(){
         //validate对整个表单校验callback: Function(boolean, object)
          this.$refs.addCateFormRef.validate(async valid =>{
            if (!valid) return
            //校验通过，发起添加分类网络请求
          const {data:res} = await this.axios.post('categories',this.addCateForm)
            if (res.meta.status !== 201){
              return this.$memege.error('添加分类失败！')
            }
            this.$memege.success('添加分类成功')
            this.getCateList()
            this.addCateDialogVisible = false
          })

        },
        //点击取消按钮，重置表单
        addCateDialogClosed(){
          this.$refs.addCateFormRef.resetFields()
          this.selectedmultiKeys = []
          this.addCateForm.cat_name= ''
          this.addCateForm.cat_pid= 0
          this.addCateForm.cat_level= 0

        }
      }
    }
</script>

<style scoped>
  .treetable{
    margin-top: 15px;
  }
  .el-cascader{width: 100%}
</style>
